<style lang="less" scoped>
  .showDetail{
    margin-top: 20px;
    width: 100%;
    .line{
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: flex-start;
      .label{
        flex:0 0 120px;
      }
      .textValue{
        font-size: 20px !important;
        color: #1890FF;
      }
    }
  }
  .table-page-search-wrapper{
    display: flex !important;
    justify-content: flex-start;
    padding-bottom: 20px;
  }
</style>
<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <div>
          <a-range-picker
            :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
            @change="onChangeSelectTime"
          />
        </div>
        <div style="margin-left: 20px;">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset">重置</a-button>
        </div>
      </div>

      <!-- <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd" v-action:label_add2>新建</a-button>
      </div> -->

      <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" showPagination="auto">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <a-button type="primary" shape="circle" icon="search" />
        <span slot="status" slot-scope="text, record">
           <template>
             <span v-if="text == 1" >已核销</span>
             <span v-if="text == 2" >未核销</span>
           </template>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import moment from 'moment'
  import {
    STable
  } from '@/components'

  const data = {
    'data': [{
        id:1,
        name: '足浴1',
        from: '',
        url:'',
        addOrReduce: '-',
        createTime: '2012/01/01 12:12:12',
        num: 300,
        creditNum: 1000,
        balance: 1700
      },
    ],
    'pageSize': 10,
    'pageNo': 0,
    'totalPage': 6,
    'totalCount': 57
  }
  // 充值记录，显示时间，金额，路径，充值方式，选择充值金额，授信金额，扣费金额
  const columns = [{
    title: '编号',
      scopedSlots: {
        customRender: 'serial'
      },
    },
    {
      title: '商户名称',
      dataIndex: 'merchantname'
    },
    {
      title: '时间',
      dataIndex: 'createtime'
    },
    {
      title: '名称',
      dataIndex: 'reason'
    },
    // {
    //   title: '充值方式',
    //   dataIndex: 'from'
    // },
    // {
    //   title: '标识',
    //   dataIndex: 'addOrReduce',
    //   scopedSlots: {
    //     customRender: 'addOrReduce'
    //   },
    // },
    {
      title: '金额',
      dataIndex: 'balance'
    },
    {
      title: '可用余额',
      dataIndex: 'available_balance'
    },
    {
      title: '可用授信额度',
      dataIndex: 'acredit_line'
    },
  ]
  export default {
    name: 'balance',
    components: {
      STable
    },
    data() {
      this.columns = columns
      return {
        list:[],
        labelList: [],
        // updata model
        mdls: {},
        updata: false,
        // create model
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: (parameter) => {
          this.queryParam.merchant_id = localStorage.getItem('merchant_id')
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          // return new Promise((res, reject) => {
          //   res()
          // }).then(res => {
          //   return data
          // })

          return this.$api.BalancePage(requestParameters)
            .then(res => {
              return res.data
            }, error => {
              this.$router.push('/user/login');
            })
        },
        selectedRowKeys: [],
        selectedRows: [],
      }
    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
        }
      },
    },
    created() {
      // this.GetSchoolRecursion()
    },
    methods: {
      moment,
      cancel(e) {
        console.log(e)
        this.$message.error('已取消')
      },
      onChangeSelectTime(val) {
        console.log("onChangeSelectTime",val)
      },
      // 重置
      reset() {
        this.queryParam = {}
        // 刷新表格
        this.$refs.table.refresh()
      },
      // 搜素模糊查询
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      }
    },
  }
</script>
